<template>
    <div class="category">
        <div
            class="categorybox"
            v-for="(item, index) in categoryAreaList"
            :key="index"
        >
            <img :src="item.url" class="c-img" />
            <p class="c-p">{{ item.name }}</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 分类区数据
const categoryAreaList = ref([
    {
        url: 'https://img1.baidu.com/it/u=1170609265,151430947&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=347',
        name: '今日新品',
    },
    {
        url: 'https://img2.baidu.com/it/u=3928442540,3265472745&fm=253&fmt=auto&app=138&f=JPEG?w=442&h=500',
        name: '水果区',
    },
    {
        url: 'https://img2.baidu.com/it/u=1927870545,134477187&fm=253&fmt=auto&app=138&f=PNG?w=533&h=500',
        name: '蔬菜区',
    },
    {
        url: 'https://img2.baidu.com/it/u=3369945825,1226890538&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=426',
        name: '水产区',
    },
    {
        url: 'https://img1.baidu.com/it/u=1657084240,1809290346&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=402',
        name: '肉类区',
    },
    {
        url: 'https://img0.baidu.com/it/u=2746104056,303039556&fm=253&fmt=auto&app=138&f=JPEG?w=765&h=473',
        name: '蛋类区',
    },
    {
        url: 'https://img0.baidu.com/it/u=3367224173,2428017255&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=333',
        name: '豆制品',
    },
    {
        url: 'https://img0.baidu.com/it/u=4196506853,1712504024&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500',
        name: '海鲜区',
    },
    {
        url: 'https://img0.baidu.com/it/u=230954785,1689637083&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=743',
        name: '中式区',
    },
    {
        url: 'https://img2.baidu.com/it/u=3593555482,1238640142&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500',
        name: '调料区',
    },
])
</script>

<style lang="scss" scoped>
.category {
    padding: 2px 12px 0 12px;
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
    .categorybox {
        width: 20%;
        // background-color: skyblue;
        display: flex;
        flex-flow: column;
        .c-img {
            width: 68px;
            height: 68px;
            // background-color: green;
            border-radius: 50%;
        }
        .c-p {
            text-align: center;
            font-size: 16px;
        }
    }
}
</style>
